<template>
  <div>
    <el-button class="qc-list-btn" type="primary" @click.stop="back"
      >返回</el-button
    >
    <Table
      ref="tableRef"
      :columns="data.columns"
      :handles="data.handles"
      :toolbar="data.toolbar"
      :query="data.query"
      @get-list="getData"
    ></Table>
  </div>
</template>

<script lang="ts" setup name="problemList">
import Table from '@/components/table/index.vue';
import {
  pagingQuestion,
  deleteProblemById,
  groundProblem,
} from '@/service/apis/market';
import { PROBLEM_STATUS } from '@/utils/dictionaries';

const router = useRouter();
const route = useRoute();
let {
  query: { id, name },
} = route;

const tableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  if (window.localStorage.getItem('problemAdd') === '1') {
    window.localStorage.removeItem('problemAdd');
    emit('get-update', (flag: boolean) => {
      if (flag) {
        tableRef.value?.getData();
      }
    });
  } else {
    if (data.isFirst) {
      data.isFirst = false;
    } else {
      id = route.query.id;
      name = route.query.name;
      data.toolbar[1].value = name;
      console.log('233----------', id);
      getData1();
    }
  }
});

const data = reactive({
  isFirst: true,
  columns: [
    {
      prop: 'problemState',
      label: '问题描述',
    },
    {
      prop: 'visits',
      label: '访问次数',
      dataType: String,
    },
    {
      prop: 'showPriority',
      label: '展示优先级',
      dataType: String,
    },
    {
      prop: 'soldOut',
      label: '展示状态',
      dic: PROBLEM_STATUS,
    },
    {
      prop: 'updateTime',
      label: '修改时间',
    },
  ],
  handles: [
    {
      label: '修改',
      permission: 'questionList.edit',
      disabledFun: (row: any) => {
        return row.sendingStatus === '1';
      },
      handle: (row: any) => {
        console.log('编辑---', row);
        router.push({
          name: 'problemEdit',
          query: { id: row.id, parentId: id },
        });
      },
    },
    {
      label: '上架',
      permission: 'questionList.use',
      labelFun: (row: any) => {
        return row.soldOut ? '下架' : '上架';
      },
      handle: (row: any) => {
        const msg = row.soldOut
          ? '下架后的问答将不在移动端展示，确认下架？'
          : '问答上架后将在移动端展示，用户可正常查看，确认上架？';
        ElMessageBox.confirm(msg, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          groundProblem({
            id: row.id,
            soldOut: !row.soldOut,
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
    {
      label: '删除',
      color: '#FA3939',
      permission: 'questionList.delete',
      handle: (row: any) => {
        ElMessageBox.confirm('此操作将永久删除该数据，是否继续？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteProblemById({
            id: row.id,
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'questionList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'problemAdd',
          query: { parentId: id },
        });
      },
    },
    {
      label: '问题分类',
      value: name,
      text: true,
    },
  ],
  query: [
    {
      label: '问题描述',
      prop: 'problemState',
      comName: 'input',
      props: {
        placeholder: '请输入问题描述',
      },
    },
    {
      label: '展示状态',
      prop: 'soldOut',
      comName: 'select',
      props: {
        placeholder: '请选择展示状态',
        change: (value: any) => {
          console.log(value);
        },
        options: PROBLEM_STATUS,
      },
    },
  ],
});

const getData1 = () => {
  getData({ pageNo: 1, pageSize: 10 }, {});
};
const getData = (page: any, search: any) => {
  const form: any = search.ruleForm || {};
  form.parentId = id;
  console.log('aaa----------', id);
  pagingQuestion(form, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value?.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
};

const back = () => {
  router.go(-1);
};
</script>